<template>
  <div class="outer">
    <div class="header"></div>
    <el-tabs id="tab" v-model="Qu_tabs" type="card">
      <el-tab-pane label="质量报告表格" name="first">
        <el-form inline>
          <div>
            <el-form-item>
              <el-date-picker v-model="beginTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" :picker-options="pickerOptions0" @change="changeDate"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" :picker-options="pickerOptions1" @change="changeDate"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select v-model="selectValue3" placeholder="质量报告表格" @change="quality_change($event)">
                <el-option v-for="item in DivForm" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="QualityHandleChangeOne()">查询</el-button>
              <el-button class="buttonExport" @click="exportExcel()">导出</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div v-show="panelOne">
          <el-table :data="tableData" height="600px" width="1000px" border stripe class="el-tabs">
            <el-table-column label="序号" type="index" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="submit_num" label="交验数" width="150"></el-table-column>
            <el-table-column prop="submit_once_num" label="一次校验合格数" width="200"></el-table-column>
            <el-table-column prop="return_num" label="返修数" width="150"></el-table-column>
            <el-table-column prop="trash_num" label="废品数" width="150"></el-table-column>
            <el-table-column prop="once_success_rate" label="一次校验合格率" width="200"></el-table-column>
            <el-table-column prop="return_rate" label="返修率" width="150"></el-table-column>
            <el-table-column prop="trash_rate" label="废品率" min-width="150"></el-table-column>
          </el-table>
        </div>

        <div id="Qu_chart1" class="Qu_EchartFrame" v-show="panelTwo"></div>
      </el-tab-pane>
      <el-tab-pane label="质量统计数据图表" name="third">
        <div id="selet2" class="Qu_SelectDiv">
          <el-select v-model="selectValue2" placeholder="请选择人物姓名" @change="Qu_selectName($event)" :style="{ float: 'left' }">
            <el-option v-for="item in Qu_name" :key="item.value" :label="item.lable" :value="item.value"></el-option>
          </el-select>
        </div>

        <div id="Qu_chart2" class="Qu_EchartFrame"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { selectReportQulity } from '@/api/bi'
export default {
  data: () => {
    return {
      DivForm: [
        { label: '质量报告表格', value: '0' },
        { label: '质量报告图表', value: '1' }
      ],
      selectValue3: '',
      panelOne: true,
      panelTwo: false,
      pickerOptions0: '',
      pickerOptions1: '',
      beginTime: '',
      endTime: '',
      response: '',
      tableData: [],
      chooseID: null,
      Qu_tabs: 'first',
      selectValue1: '',
      selectValue2: '',
      personName: [],
      dataset: Object,
      Qu_month: [
        { value: '一月', label: '1' },
        { value: '二月', label: '2' },
        { value: '三月', label: '3' },
        { value: '四月', label: '4' },
        { value: '五月', label: '5' },
        { value: '六月', label: '6' },
        { value: '七月', label: '7' },
        { value: '八月', label: '8' },
        { value: '九月', label: '9' },
        { value: '十月', label: '10' },
        { value: '十一月', label: '11' },
        { value: '十二月', label: '12' }
      ],
      Qu_name: [] /**预构建质量报表框架 */,
      Qu_getSetOptionOne: {
        title: {
          text: '本年质量报表',
          left: 'center'
        },
        tooltip: {}, //鼠标悬浮在图例时显示数字
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        legend: {
          left: 10
        },
        xAxis: {
          data: [],
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            name: '数量',
            type: 'value',
            scale: true,
            min: 0,
            boundaryGap: [0.2, 0.2] // name:"交检数"
          },
          {
            type: 'value',
            scale: true,
            name: '合格率',
            min: function (value) {
              //取最小值向下取整为最小刻度
              var a = Math.floor(value.min * 100)
              a = (a - (a % 5)) / 100
              return a
            },
            max: 1
          }
        ],
        series: [
          {
            name: '一次交检合格品数',
            type: 'bar',
            stack: 'total',
            data: [],
            yAxisIndex: 0,
            itemStyle: {
              barBorderRadius: 5
            }
          },
          {
            name: '返修数',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              barBorderRadius: 5
            },
            data: [],
            yAxisIndex: 0
          },
          {
            name: '废品数',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              barBorderRadius: 5
            },
            data: [],
            yAxisIndex: 0
          },
          {
            name: '合格率',
            type: 'line',
            data: [],
            yAxisIndex: 1
          }
        ]
      } /**预构建质量统计数据报表框架 */,
      Qu_getSetOptionTwo: {
        title: {
          left: 'center',
          text: '质量统计数据'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          },
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        axisPointer: {
          link: { xAxisIndex: 'all' }
        },

        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['一次交检合格率', '返修率', '废品率'],
          left: 10
        },
        xAxis: {
          data: [],
          boundaryGap: false,
          axisLine: { onZero: true }
        },
        yAxis: [
          {
            name: '一次交检合格率',
            type: 'value',
            min: function (value) {
              //取最小值向下取整为最小刻度
              var a = Math.floor(value.min * 100)
              a = (a - (a % 5)) / 100 /*for(let i=a;i>=0;i--){ // console.log(a);
              if(i%5==0){
                mmin=i;
                break;
              }
            }*/
              return a
            },
            max: 1 //boundaryGap: [0, "100%"],
          },
          {
            name: '返修率/废品率',
            type: 'value',
            min: function (value) {
              var a = Math.floor(value.min * 100)
              a = (a - (a % 5)) / 100
              return a
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 20
          },
          {
            start: 0,
            end: 20
          }
        ],
        series: [
          {
            name: '一次交检合格率',
            type: 'line',

            symbolSize: 8,
            hoverAnimation: false,
            yAxisIndex: 0,
            data: []
          },
          {
            name: '返修率',
            type: 'line',
            symbolSize: 8,
            yAxisIndex: 1,
            data: []
          },
          {
            name: '废品率',
            type: 'line',
            symbolSize: 8,
            yAxisIndex: 1,
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.drawBar()
    this.obtainSelect()
  },
  methods: {
    exportExcel() {
      /* generate workbook object from table */
      var wb = XLSX.utils.table_to_book(document.querySelector('#tab'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    } /** 获取下拉列表数据 */,

    async obtainSelect() {
      this.response = await selectReportQulity() // console.log(this.response)
      this.Qu_name = this.response.data.nameData
      console.log(this.Qu_name)
    } /***下拉框选择的显示表格和还是图表 */,
    quality_change(e) {
      if (e == '0') {
        this.panelOne = true
        this.panelTwo = false
      }
      if (e == '1') {
        this.panelOne = false
        this.panelTwo = true
      }
    } /** 限制两个日历选择器，使开始时间小于结束时间，并且所选时间早于当前时间*/,
    changeDate() {
      //因为date1和date2格式为 年-月-日， 所以这里先把date1和date2转换为时间戳再进行比较
      let date1 = new Date(this.beginTime).getTime()
      let date2 = new Date(this.endTime).getTime()
      this.pickerOptions0 = {
        disabledDate: time => {
          if (date2 != '') {
            return time.getTime() > Date.now() || time.getTime() > date2
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    } /*** 选择时间范围，给表格渲染数据*/,
    async QualityHandleChangeOne() {
      let response = await selectReportQulity({ beginTime: this.beginTime, endTime: this.endTime })
      this.tableData = response.data.tableDate
      this.personName = response.data.qualityEchart.nameX /*** 改成根据时间范围查询的数据集合 */
      this.dataset = response.data.qualityEchart
      this.Qu_chart1.setOption({
        xAxis: {
          data: []
        },
        series: [
          { name: '一次交检合格品数', data: [] },
          {
            name: '返修数',
            data: []
          },
          {
            name: '废品数',
            data: []
          },
          {
            name: '合格率',
            data: []
          }
        ]
      })
      this.Qu_chart1.setOption({
        xAxis: {
          data: this.personName
        },
        series: [
          { name: '一次交检合格品数', data: this.dataset.onceSuccessNum },
          {
            name: '返修数',
            data: this.dataset.returnNum
          },
          {
            name: '废品数',
            data: this.dataset.trashNum
          },
          {
            name: '合格率',
            data: this.dataset.onceSuccessRate
          }
        ]
      })
    } /**在画布上画出表格的基本框架 */,
    drawBar() {
      this.Qu_chart1 = echarts.init(document.getElementById('Qu_chart1'))
      this.Qu_chart2 = echarts.init(document.getElementById('Qu_chart2'))
      this.Qu_chart1.setOption(this.Qu_getSetOptionOne)
      this.Qu_chart2.setOption(this.Qu_getSetOptionTwo)
    } /** 根据选择的人物名字选择相应数据 */,
    async Qu_selectName(e) {
      this.chooseID = e
      let response = await selectReportQulity({ chooseId: this.chooseID })
      var ZLdataset = response.data.person_map
      this.Qu_chart2.setOption({
        xAxis: {
          data: []
        },
        series: [
          {
            name: 'bar',
            data: []
          }
        ]
      })
      this.Qu_chart2.setOption({
        xAxis: {
          data: ZLdataset.zoomTime
        },
        series: [
          {
            name: '一次交检合格率',
            data: ZLdataset.zoomOnce
          },
          {
            name: '返修率',
            data: ZLdataset.zoomRework
          },
          {
            name: '废品率',
            data: ZLdataset.zoomWaste
          }
        ]
      })
    } //end of if
  } //end of for
}
</script>
<style >
.tbody {
  width: 800px;
  margin: 0 auto;
  padding: 0;
}
.Qu_EchartFrame {
  margin-top: 20px;
  float: left;
  width: 1500px;
  height: 600px;
  border: 1px solid #ccc;
}
.Qu_SelectFrame {
  float: left;
  width: 250px;
  height: 50px;
  border: 1px solid #ccc;
}
.Qu_SelectDiv {
  float: left;
  width: 1480px;
  height: 40px;
  border: 1px solid #fafafa;
}
.Qu_tabs {
  width: 1480px;
  height: 800px;
  border: 1px solid #ccc;
}

.outer {
  width: 100%;
  padding: 0px 0px 5px 20px;
  position: absolute;
  margin-top: 60px;
}
#tab.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 3px solid #004098 !important;
  background-color: #fafafa !important;
  color: #004098 !important;
}
#tab.el-tabs {
  height: calc(100vh - 130px);
  overflow: hidden;
}

#tab.el-tabs__content {
  /* max-height: calc(100vh - 189px); */
  width: 100%;
  min-height: 800px;
  overflow-y: auto;
}
#qualitytable {
  width: 100%;
  height: 100%;
}
#qualityechart {
  width: 100%;
  height: 100%;
}
.buttonExport {
  color: white;
  background-color: #004098 !important;
}
</style>